<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="item-gap margin-5-0" @click="onAddBtn">新增</jk-add-button>
				</div>
				<div class="flex-end-center-wrap">
					<jk-search-input v-model="searchParams.nickname" placeholder="昵称" clearable size="small" class="search-bar-item-size2 margin-5-0 item-gap" @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.username" placeholder="账号" clearable size="small" class="search-bar-item-size2 margin-5-0 item-gap" @on-enter="onSearchBtn" />
					<jk-search-button size="small" type="primary" icon="el-icon-search" @click="onSearchBtn">搜索</jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<jk-table :loading="tableLoading" :height="tableHeight + 20" :data="tableData">
				<vxe-column field="nickname" title="昵称" align="left" fixed="left" :width="100" />
				<vxe-column field="username" title="账号" align="left" :min-width="120" />
				<vxe-column field="roleList" title="角色" align="left" :min-width="160">
					<template slot-scope="scope">
						<div class="flex-start-center-wrap">
							<el-tag
								v-for="(roleItem) in scope.row.roleList || []"
								:key="roleItem.id"
								size="mini"
								style="margin: 0 2px 2px 0;"
								type="info"
								effect="plain"
							>{{ roleItem.name }}</el-tag>
						</div>
					</template>
				</vxe-column>
				<vxe-column field="empName" title="当前关联员工" align="left" :min-width="100" />
				<vxe-column field="lastEmpName" title="上一次关联员工" align="left" :width="120" />
				<vxe-column title="创建人" align="left" field="creatorName" width="90"></vxe-column>
				<vxe-column title="创建时间" align="left" field="createTime" width="160"></vxe-column>
				<vxe-column title="修改人" align="left" field="updaterName" width="90"></vxe-column>
				<vxe-column title="修改时间" align="left" field="updateTime" width="160"></vxe-column>
				<vxe-column field="status" title="状态" align="center" :width="80">
					<template slot-scope="scope">
						<jk-base-status :status="scope.row.status"></jk-base-status>
					</template>
				</vxe-column>
				<vxe-column title="授权" align="center" width="220">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-button
								size="mini"
								type="text"
								icon="el-icon-menu"
								:has-permission="getPermission([`${prefix}:menu`])"
								@click="onMenuBtn(scope.row)"
							>菜单</jk-button>
							<jk-button
								size="mini"
								type="text"
								icon="el-icon-user"
								:has-permission="getPermission([`${prefix}:role`])"
								@click="onRoleBtn(scope.row)"
							>角色</jk-button>
							<jk-button
								size="mini"
								type="text"
								icon="el-icon-coin"
								:has-permission="getPermission([`${prefix}:data`])"
								@click="onDataBtn(scope.row)"
							>数据</jk-button>
						</div>
					</template>
				</vxe-column>
				<vxe-column title="操作" align="center" fixed="right" width="320">
					<template slot-scope="scope">
						<div class="flex-center">
							<jk-delete-button :permission-prefix="prefix" class="item-gap" @on-confirm="onDeleteBtn(scope.row)"></jk-delete-button>
							<jk-button
								size="mini"
								type="info"
								icon="el-icon-lock"
								class="item-gap"
								:has-permission="getPermission([`${prefix}:reset-pwd`])"
								@click="handleResetPwd(scope.row)"
							>密码</jk-button>
							<jk-disable-or-enable-button :scope="scope" :permission-prefix="prefix" class="item-gap" @on-confirm="onDisableBtn(scope.row)"></jk-disable-or-enable-button>
							<jk-edit-button :permission-prefix="prefix" @click="onEditBtn(scope.row)"></jk-edit-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<save-dialog
			:dialog-state="saveDialogState"
			:data-id="dataId"
			@on-visible-change="onVisibleChangeOfSaveDialog"
			@on-confirm="onConfirmButtonSaveDialog"
		/>
		<set-role-dialog
			:dialog-state="setRoleDialogState"
			:target-name="setTargetName"
			:data-id="dataId"
			@on-visible-change="onVisibleChangeOfSetRoleDialog"
			@on-confirm="onConfirmButtonSetRoleDialog"
		/>
		<!-- 分配菜单 -->
		<set-menu-dialog
			:dialog-state="setMenuDialogState"
			:target-name="setTargetName"
			:data-id="dataId"
			@on-confirm="onConfirmBtnOfSetMenuDialog"
			@on-visible-change="onVisibleChangeOfSetMenuDialog"
		></set-menu-dialog>
		<set-data-dialog
			:dialog-state="setDataDialogState"
			:target-name="setTargetName"
			:data-id="dataId"
			@on-visible-change="onVisibleChangeOfSetDataDialog"
			@on-confirm="onConfirmButtonSetDataDialog"
		/>
	</div>
</template>
<script>
    import {
        changeUserStatus,
        delUser,
        listUser,
        resetUserPwd
    } from '@/api/system/user';

    import calTableHeight from '../../../mixins/cal-table-height';
    import { pageConfig } from '../../../utils/jk/jk-tool';
    import saveDialog from './save-dialog';
    import setRoleDialog from './set-role-dialog';
    import setMenuDialog from './set-menu-dialog';
    import setDataDialog from './set-data-dialog';
    import jkDisableOrEnableButton from './componets/jk-disable-or-enable-button';
    import jkBaseStatus from '../menu/components/jk-base-status';
    import permissionMixin from '../../../mixins/permission-mixin';
    export default {
        name: 'User',
        mixins: [calTableHeight, permissionMixin],
        components: { saveDialog, setRoleDialog, setMenuDialog, setDataDialog, jkDisableOrEnableButton, jkBaseStatus },
        data() {
            return {
                prefix: 'system:user',
                setDataDialogState: false,
                setTargetName: '',
                setMenuDialogState: false,
                setRoleDialogState: false,
                dataId: null,
                saveDialogState: false,
                tableLoading: true,
                exportLoading: false,
                tableData: null,
                statusOptions: [],
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    username: null,
                    status: null
                },
                rules: {
                    username: [{ required: true, trigger: 'change' }],
                    nickname: [{ required: true, trigger: 'change' }],
                    password: [{ required: true, trigger: 'change' }]
                }
            };
        },
        created() {
            this.getListRequest();
        },
        methods: {
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            onDisableBtn(row) {
                const status = row.status === 1 ? 0 : 1;
                this.modifyStatusRequest(row.id, status);
            },
            onEnableBtn(row) {
                this.modifyStatusRequest(row.id, 1);
            },
            modifyStatusRequest(id, status) {
                return changeUserStatus(id, status).then(res => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                    }
                });
            },
            onDataBtn(e) {
                this.setTargetName = e.nickname;
                this.dataId = e.id;
                this.setDataDialogState = true;
            },
            onVisibleChangeOfSetDataDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.setDataDialogState = e;
            },
            onConfirmButtonSetDataDialog() {
                this.setDataDialogState = false;
                this.getListRequest();
            },
            onMenuBtn({ id, nickname }) {
                this.setTargetName = nickname;
                this.dataId = id;
                this.setMenuDialogState = true;
            },
            onConfirmBtnOfSetMenuDialog() {
                this.setMenuDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSetMenuDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.setMenuDialogState = e;
            },
            onVisibleChangeOfSetRoleDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.setRoleDialogState = e;
            },
            onConfirmButtonSetRoleDialog() {
                this.setRoleDialogState = false;
                this.getListRequest();
            },
            onConfirmButtonSaveDialog() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSaveDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.saveDialogState = e;
            },
            /** 查询用户列表 */
            getListRequest() {
                this.tableLoading = true;
                listUser(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalCount = res.data.count;
                    }
                });
            },
            // 用户状态修改
            handleStatusChange(row) {
                const text = row.status === 0 ? '启用' : '停用';
                this.$confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(() => {
                    return changeUserStatus(row.id, row.status);
                }).then(() => {
                    this.$message(text + '成功');
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            /** 重置密码按钮操作 */
            handleResetPwd(row) {
                this.$prompt(`请输入 "${row.username}" 新密码：`, '修改密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({ value }) => {
                    resetUserPwd(row.id, value).then(res => {
                        if (res.data.status === 200) {
                            this.$tipsBar(this, 'success', 'custom', '密码修改成功！');
                        }
                    });
                }).catch(() => {});
            },
            /** 分配用户角色操作 */
            onRoleBtn(row) {
                this.setTargetName = row.nickname;
                this.dataId = row.id;
                this.setRoleDialogState = true;
            },
            /** 删除按钮操作 */
            onDeleteBtn(row) {
                const ids = row.id;
                delUser(ids).then((res) => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                        this.$tipsBar(this, 'delete');
                    }
                }).catch(() => {});
            }
        }
    };
</script>
